<template>
  <div class="month-details">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <!-- v-if="list.length != 0" -->
      <div class="month-details-mid" v-if="list.length != 0">
        <div v-if="showThis">
          <div class="month-title">
            <p>
              账单日：
              <span>{{start_day}}</span>
            </p>
          </div>
          <div class="month-details-title" :class="addbt">
            <h4 class="title-tips">币种账户</h4>
            <h4>账单总额</h4>
          </div>
          <div class="month-details-list" v-for="item in my_bill" :key="item.name">
            <p class="account-tips">{{item.name}}</p>
            <p class="account-total">{{item.amount}}</p>
          </div>
        </div>
        <div class="unbill" v-else>
          <div class="month-title">
            <p>
              还款日：
              <span>{{end_day}}</span>
            </p>
            <p class="month-title-repayment">{{repayment_tips}}</p>
          </div>
          <div class="month-details-title" :class="addbt">
            <h4 class="title-tips">币种账户</h4>
            <h4 class="title-tips2">账单总额</h4>
            <h4>剩余应还</h4>
          </div>
          <div class="month-details-list" v-for="item in my_bill" :key="item.name">
            <p class="account-tips">{{item.name}}</p>
            <p class="account-total">{{item.amount}}</p>
            <p class="account-repayment">{{item.unpay_amount}}</p>
          </div>
        </div>
      </div>
      <div class="statement-list">
        <div class="shell-bottom-title" v-if="list.length != 0">
          <div class="tabs">
            <div class="tabs-wrap">
              <ui-tabs ref="tabs" :list="channel" :active="channel_id" @choose="changeTab"/>
            </div>
          </div>
          <!-- <div
            class="shell-title-item"
            @click="traderItemChoose('全部')"
            :class="itemAddActive('全部')"
          >
            <p>全部</p>
            <i></i>
          </div>
          <div
            class="shell-title-item"
            v-for="item in my_bill"
            :key="item.name"
            @click="traderItemChoose(item.name)"
            :class="itemAddActive(item.name)"
          >
            <p>{{item.name}}</p>
            <i></i>
          </div>-->
        </div>
        <account-statement-item
          v-for="(item,index) in bill_month_details"
          :key="index"
          :account-item="item"
          :account-sym="no"
          @account-item-e="showDetails"
        ></account-statement-item>
      </div>
      <ui-empty :empty="{text:'暂无数据'}" v-if="list.length==0"></ui-empty>
    </ScrollList>
  </div>
</template>

<script>
import AccountStatementItem from "~/components/AccountStatementItem.vue";
import Swiper from "swiper";
import UiEmpty from "~/components/empty";
import ScrollList from "~/components/ScrollList";
import UILoading from "~/components/loading";
import BillTab from "~/components/BillTab.vue";

export default {
  components: {
    AccountStatementItem,
    [BillTab.name]: BillTab,
    ScrollList,
    UiEmpty,
    [UILoading.name]: UILoading
  },
  data: function() {
    return {
      no: "no",
      initLoading: true,
      swiper: "",
      page: 1,
      total: 1,
      list: [],
      loading: false,
      config: {
        bottom: false,
        pull: false,
        end: false
      },
      channel: [
        {
          name: "全部",
          amount: 1,
          unpay_amount: "0"
        }
        // {
        //   name: "人民币",
        //   amount: 2,
        //   unpay_amount: "0"
        // },
        // {
        //   name: "美元",
        //   amount: 3,
        //   unpay_amount: "0"
        // },
        // {
        //   name: "港币",
        //   amount: 4,
        //   unpay_amount: "0"
        // },
        // {
        //   name: "日元",
        //   amount: 5,
        //   unpay_amount: "0"
        // },
        // {
        //   name: "加拿大元币",
        //   amount: 6,
        //   unpay_amount: "0"
        // },
        // {
        //   name: "瑞尔",
        //   amount: 7,
        //   unpay_amount: "0"
        // }
      ],
      channel_id: 0,
      currency_code: "",
      currency_name: "全部"
    };
  },
  computed: {
    currencys() {
      return this.$store.state.currencys;
    },
    guess_params() {
      return this.$store.state.wealthLeShellBill.my_bill.data.guess_params;
    },
    start_day() {
      let _s_day = this.guess_params.start_day;
      _s_day = _s_day.trim();
      let arr = _s_day.split(".");
      // _s_day = arr[1] + "-" + arr[0];
      _s_day = arr[0] + "-" + arr[1];
      return _s_day;
    },
    end_day() {
      let _s_day = this.guess_params.end_day;
      _s_day = _s_day.trim();
      let arr = _s_day.split(".");
      // _s_day = arr[1] + "-" + arr[0];
      _s_day = arr[0] + "-" + arr[1];
      return _s_day;
    },
    repayment_tips() {
      return this.guess_params.text;
    },
    current_bill_page() {
      return this.$store.state.wealthLeShellBill.current_bill_page;
    },
    showThis() {
      return this.current_bill_page === "this" ? true : false;
    },
    last_year_day() {
      return this.$store.state.wealthLeShellBill.last_year_day;
    },
    this_year_day() {
      return this.$store.state.wealthLeShellBill.this_year_day;
    },
    currentMonth() {
      return this.current_bill_page === "this"
        ? this.this_year_day
        : this.last_year_day;
    },
    tab() {
      return this.current_bill_page === "this" ? "unbill" : "bill";
    },
    my_bill() {
      return this.$store.state.wealthLeShellBill.my_bill.data.list;
    },
    bill_month_details() {
      if (this.list.length > 0) return this.list;
      return this.$store.state.wealthLeShellBill.bill_month_details.data.list;
    },
    addbt() {
      return { addbt: this.my_bill.length < 1 };
    }
  },
  mounted() {
    let that = this;
    (async () => {
      // await this.get_bill();
    })();
    this.$nextTick(() => {
      this.$refs.scroll.$emit("pulling");
    });
  },
  watch: {
    tab(val, oldVal) {
      this.$refs.scroll.$emit("pulling");
    }
  },
  methods: {
    async get_bill() {
      this.initLoading = true;
      let { data: rs } = await this.$axios.post("?ct=api&ac=my_bill", {
        tab: this.tab
        // month: this.currentMonth
      });
      if (rs.code == 0) {
        if (this.tab == "bill") {
          this.$store.commit(
            "wealthLeShellBill/SET_bill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_bill_month_tips",
            rs.data.guess_params.text
          );
        } else {
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_guess_params",
            rs.data.guess_params
          );
          this.$store.commit(
            "wealthLeShellBill/SET_unbill_month_tips",
            rs.data.guess_params.text
          );
        }
        this.$store.commit("wealthLeShellBill/set_my_bill", rs);
        this.channel = [
          {
            name: "全部",
            amount: 1,
            unpay_amount: "0"
          }
        ];
        for (let i = 0; i < rs.data.list.length; i++) {
          this.channel.push(rs.data.list[i]);
        }
        // if (!Array.isArray(data) || data.length < 1) {
        //   this.$toast(rs.msg);
        //   return;
        // }

        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
        this.$toast(rs.msg);
      }
    },
    async getPage(isRefresh) {
      if (this.loading || this.config.end) return false;
      this.loading = true;
      try {
        let obj = {
          page: this.page,
          month: this.currentMonth
        };
        if (this.currency_code) {
          obj = Object.assign(obj, { currency_code: this.currency_code });
        }
        let { data: rs } = await this.$axios.post(
          "?ct=api&ac=monthly_bills",
          obj
        );
        // return;
        if (rs.code == 0) {
          const { data } = rs;
          this.$store.commit("wealthLeShellBill/set_bill_month_details", rs);
          this.total = Number(data.total);

          if (isRefresh) {
            this.list = data.list;
          } else {
            this.list = this.list.concat(data.list);
          }
          if (this.total > this.list.length) {
            this.page++;
            this.config.end = false;
          } else {
            this.config.end = true;
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }

      this.loading = false;
    },
    async pull(cb) {
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.get_bill();
      this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },

    showDetails(item) {
      //点击跳转流水详情
      this.$router.push({
        path: "bill/bill-details",
        query: { bill_id: item.bill_id }
      });
    },
    changeTab(item) {
      this.traderItemChoose(item.name);
    },
    traderItemChoose(name) {
      if (name == this.currency_name) return;

      if (name == "全部") {
        this.currency_name = "全部";
        this.currency_code = "";
      } else {
        this.currency_name = name;
        this.currencys.forEach(element => {
          if (element.name == name) {
            this.currency_code = element.code;
            return;
          }
        });
      }
      this.initLoading = true;
      this.loading = false;
      this.$refs.scroll.$emit("pulling");
    },
    itemAddActive(name) {
      return {
        active: name == this.currency_name ? true : false
      };
    }
  }
};
</script>

<style lang="less" scoped>
.tabs-wrap {
  flex: 1;
  overflow: hidden;
  // position: fixed;
  // top: 88px;
  // left: 0;
}
.tabs {
  display: flex;
  background-color: #fff;
  height: 88px;
  // border-bottom: 1px solid #efefef;

  .ui-tabs {
    border: none;
  }
}

.fixed {
  position: fixed;
  top: 88px;
  left: 0;
  z-index: 999;
  width: 100%;
}
.h428 {
  height: 428px;
}
.swiper-wrapper {
  display: flex;
  transform-style: preserve-3d;
}

.month-details {
  overflow: hidden;
  color: rgb(41, 41, 41);
}

.month-details-mid {
  width: 690px;
  margin-top: 20px;
  margin-left: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #ccc, 2px 2px 4px #ccc, 2px 2px 4px #ccc,
    2px 2px 4px #ccc;
}
.month-title {
  /* height: 84px; */
  line-height: 84px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
  border-bottom: 2px solid #ededf0;
}
.month-title p {
  margin-left: 30px;
}
.month-title p span {
  color: rgb(41, 41, 41);
}
.month-details-title {
  display: flex;
  margin-left: 30px;
  padding-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.month-details-title.addbt {
  padding-bottom: 30px;
}
.month-details-title h4.title-tips {
  width: 320px;
}
.month-details-list {
  display: flex;
  margin-left: 30px;
  margin-top: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(41, 41, 41);
}
.month-details-list:last-child {
  padding-bottom: 30px;
}
.month-details-list p.account-tips {
  width: 320px;
}
.month-details-list p.account-total {
  font-family: "SFUIDisplay-Medium";
}
.unbill {
  /* display: flex; */
}
.unbill .month-title {
  /* padding-top: 44px;
  padding-bottom: 44px; */
  /* display: flex; */
}
.unbill .month-title p {
  display: inline-block;
  /* float: left; */
  /* flex-grow: 80; */
}
.unbill .month-title .month-title-repayment {
  float: right;
  color: #f05521;
  margin-left: 0;
  margin-right: 30px;
  /* flex-grow: 1; */
}
.unbill .month-details-title h4.title-tips {
  width: 230px;
}
.unbill .title-tips2 {
  width: 230px;
}
.unbill .month-details-list p.account-tips {
  width: 230px;
}
.unbill .account-total {
  width: 230px;
}
.unbill .account-repayment {
  /* float: right; */
  color: #f05521;
}
.unbill .month-details-list p {
  /* flex-grow: 1; */
}

.statement-list {
  margin-top: 20px;
}
.shell-bottom-title {
  /* height: 88px; */
  line-height: 88px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: rgb(51, 51, 51);
  background-color: #fff;
  border-bottom: 2px solid #ededf0;
}
.shell-title-item {
  display: inline-block;
  margin-left: 50px;
}
.shell-title-item:first-child {
  margin-left: 30px;
}
.shell-title-item p {
}
.shell-title-item i {
}
.shell-title-item.active {
}
.shell-title-item.active p {
  color: #2086f9;
  font-family: "PingFangSC-Medium";
}
.shell-title-item.active i {
  display: block;
  margin: auto;
  margin-top: -12px;
  height: 6px;
  width: 42px;
  background-color: #2086f9;
  border-radius: 2px;
}
</style>
